<template>
    <div class="conversation-list">
        <div class="list-header">
            <el-icon>
                <ChatDotRound />
            </el-icon>
            <span class="list-title">近期对话</span>
        </div>

        <div class="conversation-items">
            <div v-for="ms in messageList" :key="ms.messageId" class="conversation-item" :class="{
                'active': ms.messageId === messageId,
                'hover': hoveredMessageId === messageId
            }" @mouseover="hoveredMessageId = ms.messageId"
                @mouseleave="hoveredMessageId = null"
                @click="handleMessageClick(ms.messageId)">
                <div class="message-preview">
                    <span class="message-text">{{ ms.message }}</span>
                    <el-dropdown v-if="hoveredMessageId === ms.messageId || activeMessageId === ms.messageId">
                        <span>
                            <el-icon class="more-icon"><More /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                            <el-dropdown-item @click="deleteMessageClick(ms.messageId)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <div v-if="showMore" class="show-more">
                查看更多...
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, PropType } from 'vue'
import { ChatDotRound, More } from '@element-plus/icons-vue'

interface MessageItem {
    messageId: string;
    message: string;
}

const props = defineProps({
    messageId: {
        type: String,
        default: false
    },
    messageSendStatus: {
        type: Boolean,
        default: false
    },
    messageList: {
    // type: Array as () => Array<{
    //   messageId: string | number;
    //   message: string;
    // }>,
    type: Array as PropType<MessageItem[]>,
    default: () => []
  },
})

const emit = defineEmits(['send','delete'])

const activeMessageId = ref(null)
const hoveredMessageId = ref(null)
const showMore = ref(true) // 控制"查看更多"的显示

const handleMessageClick = (messageId) => {
    if (props.messageSendStatus) {
        return
    }
    activeMessageId.value = messageId
    emit('send', messageId)
    // 这里可以添加点击后的逻辑，比如打开对话详情
}
const deleteMessageClick = (messageId) =>{
    if (props.messageSendStatus) {
        return
    }
    activeMessageId.value = messageId
    emit('delete', messageId)
}
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
.conversation-list {
    /* width: 200px; */
    margin-right: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.list-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.list-title {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
}

.conversation-items {
    padding: 8px 0;
}

.conversation-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.conversation-item:hover {
    background-color: #f5f7fa;
}

.conversation-item.active {
    /* 字体倾斜 */
    /* transform: skewY(16deg); */
    font-size: 15px;
    font-weight: bold;
    background-color: #ecf5ff;
    /* 文字阴影 */
    background: linear-gradient(to left, #d5f1ea, #f7d5ce, #fae1fa,#d5f1ea);
    /* 渐变背景 */
    /* -webkit-background-clip: text; */
    /* 背景裁剪到文本 */
    /* background-clip: text; */
}

.message-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-text {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.more-icon {
    color: #909399;
    font-size: 16px;
    visibility: hidden;
}

.conversation-item:hover .more-icon,
.conversation-item.active .more-icon {
    visibility: visible;
}

.show-more {
    padding: 10px 16px;
    text-align: center;
    color: #409eff;
    font-size: 13px;
    cursor: pointer;
}

.show-more:hover {
    text-decoration: underline;
}
</style>